import React,{useState} from 'react';
import './Rank.css';
import TopBar from '../TopBar/TopBar';
import face from '../../assets/img/face.jpg';
import oneface from '../../assets/img/1.jpg';
import twoface from '../../assets/img/2.jpg';
import threeface from '../../assets/img/3.jpg';
import fourface from '../../assets/img/4.jpg';
import fiveface from '../../assets/img/5.jpg';
import sixface from '../../assets/img/6.jpg';
import sevenface from '../../assets/img/7.jpg';
import eightface from '../../assets/img/8.jpg';
import nineface from '../../assets/img/9.jpg';
import tenface from '../../assets/img/10.jpg';
import elevenface from '../../assets/img/11.jpg';
import twelveface from '../../assets/img/12.jpg';
import thirteenface from '../../assets/img/13.jpg';
import fourteenface from '../../assets/img/14.jpg';
import fifteenface from '../../assets/img/15.jpg';
import sixteenface from '../../assets/img/16.jpg';
import seventeenface from '../../assets/img/17.jpg';
import eighteenface from '../../assets/img/18.png';
import nineteenface from '../../assets/img/19.jpg';
import twentyface from '../../assets/img/20.jpg';
import twentyoneface from '../../assets/img/21.png';

export default function Rank(props) {
    const [blanklist, setblanklist] = useState(
        [
            {
                name: "早睡早起",
                url: face,
                time: "40分钟",
                like: false
            },{
                name: "Your name",
                url: fourteenface,
                time: "39分钟",
                like: false
            },{
                name: "禤鹏",
                url: oneface,
                time: "7分钟",
                like: false
            },{
                name: "小倩",
                url: fourface,
                time: "",
                like: false
            },{
                name: "陈伊晓",
                url: threeface,
                time: "",
                like: false
            },{
                name: "老麦",
                url: fifteenface,
                time: "",
                like: false
            },{
                name: "Lychee",
                url: tenface,
                time: "",
                like: false
            },{
                name: "滔滔",
                url: sixteenface,
                time: "",
                like: false
            },{
                name: "李岱钧",
                url: seventeenface,
                time: "",
                like: false
            },{
                name: "知心小哥哥",
                url: elevenface,
                time: "",
                like: false
            },{
                name: "何佳乐",
                url: sevenface,
                time: "",
                like: false
            },{
                name: "梁洪瑜",
                url: eighteenface,
                time: "",
                like: false
            },{
                name: "啊威",
                url: nineface,
                time: "",
                like: false
            },{
                name: "宋浚泽",
                url: sixface,
                time: "",
                like: false
            },{
                name: "白泽南",
                url: twelveface,
                time: "",
                like: false
            },{
                name: "细肥",
                url: nineteenface,
                time: "",
                like: false
            },{
                name: "王星池",
                url: thirteenface,
                time: "",
                like: false
            },{
                name: "冼文龙",
                url: twentyface,
                time: "",
                like: false
            },{
                name: "林浩文",
                url: twoface,
                time: "",
                like: false
            },{
                name: "食安梁馨元",
                url: eightface,
                time: "",
                like: false
            },{
                name: "borupin",
                url: fiveface,
                time: "",
                like: false
            },{
                name: "曾子剑",
                url: twentyoneface,
                time: "",
                like: false
            }
            
        ]);
        function changelike(index){
            let newlist = blanklist;
            newlist[index].like = !newlist[index].like;
            setblanklist(JSON.parse(JSON.stringify(newlist)));
        }

    return (
        <div className={'rankbox ' + (props.show ? "show" : "")}>
            <TopBar title="读书排行榜" back={props.hiderank} />
            <div className="blankbox"></div>
            <div className="blankcontentbox">
                {
                    blanklist.map((item, index) => (
                        <div className="blankminbox" key={index}>
                            <div className="blankimg">
                                <img src={item.url} alt="" />
                            </div>
                            <div className="blankname">{item.name}</div>
                            <div className={"blankicon " + (item.like ? "like" : "")}>
                                <div className="time">{item.time}</div>
                                {
                                    item.like ? <i onClick={()=>changelike(index)} className='iconfont icon-aixin1'></i> : <i onClick={()=>changelike(index)} className='iconfont icon-aixin'></i>
                                }
                            </div>
                        </div>
                    ))
                }

            </div>
        </div>
    );
}
